<template>
  <div class="swiper-box" ref="swiperBox">
    <swiper class="box-container" :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="item in listImg" :key="item.id">
        <img alt="swiper-image" class="swiper-image" :src="item.url">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'
  export default {
    data () {
      return {
        listImg: [
          {url: require('../../../../assets/1first/3美食/haibaomianbao.png')},
          {url: require('../../../../assets/1first/3美食/haibaomianbao.png')}
        ],
        swiperOption: {
          notNextTick: true,
          loop: true,
          autoplayDisableOnInteraction: true,
          direction: 'horizontal',
          paginationType: 'bullets',
          paginationClickable: true,
          pagination: {
            el: '.swiper-pagination'
          },
          paginationHide: true,
          autoplay: {
            delay: 2000
          },
        }
      }
    },
    components: {
      swiper,
      swiperSlide
    },
    computed: {
      mySwiper () {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {
    }
  }
</script>
<style scoped>
  .swiper-box, .box-container{
    font-size: 0;
  }
  .swiper-image{
    width: 100%;
  }
</style>
